<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.mobile-1.0b3.min.js"></script>
<script src="LoadNewsDetail.js" type="text/javascript"></script>
<script type="text/javascript">
	window.onload = loadContent();
</script>
<style type="text/css">
body{
    margin: 2px 2px 2px 2px;
}
img {
    border:0;
    vertical-align:middle}

.news{
    float: left;
    width:100%;
    padding: 0 0 2% 0;
    margin-bottom: 2%;
    background-color: #fff;
    border-bottom: dotted 2px #dddddd;
    /* border:1px solid green; */  
}

.news .thumb{
    display: block;
    margin: 2% 2% 2% 0.6%;    
    width: 97%;
    max-width: 400px;
    float:left;
}
.news a.title{
    width: 100%;
    font-weight:bold;
    text-decoration: none;
    font-size: 140%;    
    font-family: Myriad Pro;
    margin-left: 5px;
    color: red;    
}
.news .desc{
    display:block;
    margin:5px;
    text-align:justify;
    font-style: italic; 
    font-size: 120%;
    font-family: Myriad Pro;
    font-size: 98%;
}
.news .content{
	float: none;
	display:block;
	margin:5px;
	text-align:justify;
	font-family: Myriad Pro;
}

.news .content img{
    border:0;
    vertical-align:middle;

}
.news .content .center{
    text-align:center;
}
.new{
    float:left;   
    width: 100%;
    border:1px solid yellow; 
}
.newsItems {
    width:32.5%;
    padding:5px 0 5px 5px;
    border:1px solid red;    
    float:left;
}
.newsItems a.title{
    display:block;
    font-weight:bold;
    text-align: center;
    text-decoration: none;
}
.newsItems .thumb{ 
    display:block;
    width:60px;        
    margin: 0 auto;
    text-align: center; 
}

.Related{
    float: left;
    width: 100%; 
    padding: 0px 0 5px 0;
    background-color: #fff;
    border-bottom: dotted 2px #dddddd;
}
.oldNews{
    float: left;
    width: 100%;
    padding: 3px;
    /* border:1px solid black; */
}

.oldNews a.title{
    margin: 5px 5px 5px 5px;
    width: 100%;
    font-weight:bold;
    text-decoration: none;
    font-size: 140%;
    color: green;
}
.oldNews a{
    font-weight: bold;
    text-decoration: none;
    font-family: sans-serif;
    font-style: italic;
    font-size: 11px;
    padding: 10px;
}
.main{
    background-color: #2D427B;    
    color: white;
    display: block;
    padding:3px 3px 3px;    
    height:15px;    
    font-family: Myriad Pro !important;
    text-transform:uppercase;
    -moz-border-radius-topleft: 8px ;
    border-top-left-radius: 8px ;
    -moz-border-radius-topright: 8px ;
    border-top-right-radius: 8px ;    
}
</style>
</head>
<body>
<div class="news">
    <span class="main"> Home ></span>
    <div style="width: 100%;">
        <a id="title" class="title" href="#"></a>
    </div>            
    <div id ="description" class="desc" href="#">
        
    </div>
    <div id="content" class="content">
        
    </div>
</div>

<div class="Related">   
    <span class="main"> Old new</span> 
    <div class="oldNews">
        <a href="#">Decide which element to display in front!</a>
    </div>
    <div class="oldNews">
        <a href="#">Decide which element to display in front!</a>
    </div>
    <div class="oldNews">
        <a href="#">Decide which element to display in front!</a>
    </div>
</div>
</body>
</html>
